<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<title>合同签字</title>
		<link rel="stylesheet" type="text/css" href="__CSS__/index.css" />
		<script src="__JS__/vue.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="overflow: hidden;">
		<div id="signTrue" style="background-color: #F7F8F9;min-height: 100vh;width: 100%;">
			<div class="tabbar-top">
				<div class="item" :class="tab_id == 1 ?'item-active':''" @click="changeTab(1)">
					电子行程
				</div>
				<div class="item" :class="tab_id == 2 ?'item-active':''" @click="changeTab(2)">
					获取合同
				</div>
				<div class="item" :class="tab_id == 3 ?'item-active':''" @click="changeTab(3)">
					合同样本
				</div>
			</div>
			<template v-if="tab_id == 1">
				<div class="page-title">
					电子行程
				</div>
				<div class="tab-id-1-title">
					基本信息
				</div>
				<div class="form">
					<div class="form-div">
						<div class="form-label">
							导游姓名：
						</div>
						<input type="text" class="form-input" v-model="base_user_name" />
					</div>
					<div class="form-div">
						<div class="form-label">
							导游电话：
						</div>
						<input type="text" class="form-input" v-model="base_user_mobile" />
					</div>
					<div class="form-div">
						<div class="form-label">
							出发日期：
						</div>
						<input type="text" class="form-input" v-model="base_star_date" />
					</div>
				</div>
				<div class="tab-id-1-title" style="margin-top: 1.5625rem ;">
					车辆信息
				</div>
				<div class="form">
					<div class="form-div">
						<div class="form-label">
							车牌号：
						</div>
						<input type="text" class="form-input" v-model="driver_car_id" />
					</div>
					<div class="form-div">
						<div class="form-label">
							司机姓名：
						</div>
						<input type="text" class="form-input" v-model="driver_user_name" />
					</div>
					<div class="form-div">
						<div class="form-label">
							司机电话：
						</div>
						<input type="text" class="form-input" v-model="driver_user_mobile" />
					</div>
				</div>
			</template>
			<template v-if="tab_id == 2">
				<div class="page-title">
					获取合同
				</div>
				<div class="tab-id-1-title">
					2017-07-12电子合同
				</div>
				<div class="form">
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								家庭编号：
							</div>
							<div class="form-label">
								01
							</div>
						</div>
						<div class="no-family-signin">
							未签字
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								状态：
							</div>
							<div class="form-label">
								未签字
							</div>
						</div>
					</div>
				</div>
				<div class="form" style="display: flex;">
					<div class="sign-bottom-btn" @click="goTosignPace">
						开始签字
					</div>
				</div>
				
				<div class="sign-btn-list">
					<div class="btn-item-sign">
						暂时保存
					</div>
					<div class="btn-item-sign">
						确认完成
					</div>
				</div>
			</template>
			<template v-if="tab_id == 3">
				<div class="page-title">
					合同样本
				</div>
				<div class="tab-id-1-title" style="margin-top: 40px;">
					2017-07-12电子合同
				</div>
				<div class="form">
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								家庭编号：
							</div>
							<div class="form-label">
								01
							</div>
						</div>
						<div class="no-family-signin" style="color: green;">
							已签字
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								签约代表：
							</div>
							<div class="form-label">
								王小勇
							</div>
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								联系电话：
							</div>
							<div class="form-label">
								179****4656
							</div>
						</div>
					</div>
					<div class="form-div">
						<div class="v-div-form">
							<div class="form-label">
								电子签名：
							</div>
							<img class="form-label-image" src="" />
						</div>
					</div>
				</div>
				<div class="sign-btn-list">
					<div class="btn-item-sign">
						暂时保存
					</div>
					<div class="btn-item-sign">
						确认完成
					</div>
				</div>
			</template>
		</div>
	</body>
</html>
<script>
	new Vue({
		el: "#signTrue",
		data() {
			return {
				tab_id: 1,
				family_id: "",
				user_name: "",
				driver_user_mobile: "",
				driver_user_name: "",
				driver_car_id: '',
				base_star_date: "",
				base_user_mobile: '',
				base_user_name: ""
			}
		},
		created() {

		},
		methods: {
			goTosignPace() {
				window.location.href = "./sign_pact.html"
			},
			changeTab(id) {
				this.tab_id = id
			},
			postForm() {

			}
		}
	})
</script>
